<template>
  <view class="order-list">
    <QcscrollUni
      ref="mescrollRef"
      :getData="getData"
      :top="topScroll"
      :bottom="bottomScroll"
      :height="heightScroll">
      <view class="list-wrap flex-column" v-for="(item, index) in order.list" :key="index">
        <text class="text1 text-overflow">{{ item.startChargeSeq || '--' }}</text>
        <text class="text2 text-overflow">{{ item.stationName || '--' }}</text>
        <text class="text1">终端编码：{{ item.connectorCode || '--' }}</text>
        <text v-if="appType === 'lznt'" class="text1">快捷码：{{ item.shortcutCode || '--' }}</text>
        <text class="text1">充电电量：{{ getVal(item.totalPower, '度') }}</text>
        <text class="text1">充电车辆：{{ item.plateNumber || '--' }}</text>
        <text class="text1">充电时间：{{ item.startTime || '--' }}</text>
        <text class="text1 text3 text-overflow">异常原因：{{ item.abnormalMsg || '--' }}</text>
        <text class="money">
          {{ getVal2(item.totalMoneyActual, '￥', 2) }}
        </text>
      </view>
    </QcscrollUni>
  </view>
</template>

<script lang="ts" setup>
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { pagingAbnormalOrder } from '@/service/apis/order';
import { getVal, getVal2 } from '@/utils/util';
import { systemInfo, getwv } from '@mixins/info';

const appType = import.meta.env.VITE_VUE_APP_TYPE;

const topScroll = '188rpx';
// const topScroll = '104rpx';
const bottomScroll = '154rpx';
const heightScroll = ref(
  `${
    systemInfo.screenHeight -
    getwv(95 + 78) -
    systemInfo.statusBarHeight -
    systemInfo.navigationBarHeight
  }px`
);

watch(systemInfo, val => {
  if (val) {
    heightScroll.value = `${
      systemInfo.screenHeight -
      getwv(95 + 78) -
      systemInfo.statusBarHeight -
      systemInfo.navigationBarHeight
    }px`;
  }
});

let order = reactive({
  list: [] as Array<any>,
});
// 上拉加载的回调
const getData = (extraParams: { pageNum: number; pageSize: number }) => {
  return new Promise(resolve => {
    pagingAbnormalOrder({}, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          order.list = res.dataList;
        } else {
          order.list = [...order.list, ...res.dataList];
        }
        resolve({ list: order.list, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};
</script>

<style lang="scss">
@import './order-item.scss';
</style>